<template>
    <view class="detai-container">
		<!-- 上面的 x 和 标题 -->
		<view class="up-edit-container">
			<view class="cuowu-icon-container iconfont icon-x" @click="closeBtn"></view>
			<view class="edit-title-container">编辑</view>
		</view>
		<!-- scroll-view 解决弹框中内容过多时无法上下滑动问题 -->
		<scroll-view scroll-y="true" style="height: 1200rpx;width: 100%;">
			<!-- 中间的明细信息 -->
			<view class="inner-container">
				<!-- 明细第一个 名字 -->
				<view class="inner-contrainer-container">
					<view class="name-container-left">
						名称
					</view>
					<view class="name-container-right" :style="{width: accountbookNameLength + 'rpx'}">
						<!-- <input type="text" style="font-size: 30rpx;min-width: 30rpx;height: 100%;" @input="change('name')"/> -->
<!-- 						<input type="text" placeholder-style="color:#999;"
												:style="'width:'+String(accountbook.name).length*10+'px;max-width:90%'" :value="accountbook.name" @input="change('name')" /> -->
						<u--input border="none" v-model="accountbook.name" @change="change('name')"></u--input>
					</view>
				</view>
				<!-- 明细第二个 图标 -->
				<view class="inner-contrainer-container" >
					<view class="name-container-left">
						图标
					</view>
					<view class="icon-container-right iconfont icon-jingdian" @click="openIconDialog">
					</view>
				</view>
				<!-- 明细第三个 颜色 -->
				<view class="inner-contrainer-container" >
					<view class="name-container-left">
						颜色
					</view>
					<!-- 颜色盒子 -->
					<view class="color-container-right" @click="openColorDialog" :style="{backgroundColor: bgcColor}">
					</view>
				</view>
				<!-- 明细第四个 预算 -->
				<view class="inner-contrainer-container" >
					<view class="name-container-left" >
						预算
					</view>
					<view class="name-container-right" :style="{width: accountbookbudgetLength + 'rpx'}">
						<u--input border="none" type="number" v-model="accountbook.budget" @change="change('budget')"></u--input>
					</view>
				</view>
				<!-- 明细第五个 分类 -->
				<view class="inner-contrainer-container" >
					<view class="name-container-left">
						分类
					</view>
					<view class="">
					</view>
				</view>

				<!-- 子分类信息 -->
				<view class="category-container">
					<!-- 上方标题 -->
					<view class="catetory-title-container" @click="showCategory('payCategoryFlag')" > 
						<view class="left-catetory-title">支出</view>
						<view :class="['right-catetory-icon', 'iconfont', 'icon-icon_on_the_down', {'rotate' : payCategoryFlag}, {'no-rotate' : !payCategoryFlag}]"></view>
					</view>
					<!-- 下面分类盒子 （包含左边图标，名字，右边的预算，右箭头） -->
					<view class="catetory-content-container" v-if="payCategoryFlag">
						<category :categoryList="categoryList"></category>
					</view>
				</view>
				<view class="category-container">
					<!-- 上方标题 -->
					<view class="catetory-title-container" @click="showCategory('incomeCategoryFlag')"> 
						<view class="left-catetory-title">收入</view>
						<view :class="['right-catetory-icon', 'iconfont', 'icon-icon_on_the_down', {'rotate' : incomeCategoryFlag}, {'no-rotate' : !incomeCategoryFlag}]"></view>
					</view>
					<!-- 下面分类盒子 （包含左边图标，名字，右边的预算，右箭头） -->
					<view class="catetory-content-container" v-if="incomeCategoryFlag">
						<category :categoryList="categoryList"></category>
					</view>
				</view>
				<!-- 添加分类组件 -->
				<view class="add-category-container">
					<view class="add-category-left-icon iconfont icon-tianjia"></view>
					<view class="add-category-right-content">添加分类</view>
				</view>
				<!-- 确定删除按钮 -->
				<view class="btn-container">
					<confirm-btn></confirm-btn>
				</view>
			</view>
		</scroll-view>
		<!-- 颜色组件弹框 -->
		<u-popup :show="isShowColor":round="20"  mode="center" @close="closeColor" @open="openColor">
			<color :selectIndex="selectColorIndex"></color>
		</u-popup>
		<!-- 图标组件弹框 -->
		<u-popup :show="isShowIcon":round="20"  mode="center" @close="closeIcon" @open="openIcon">
			<my-icon @selectIcon="selectIcon" :iconCategorysList="iconCategorysList"></my-icon>
		</u-popup>
	</view>
</template>

<script>
	import color from '@/components/color/color/color.vue';
	import myIcon from '@/components/icon/my-icon.vue';
	import confirmBtn from '@/components/confirm-btn/confirm-btn';
	import category from '@/components/category/category';
	import {checkStrType} from '@/util/regular/regular.js';
    export default {
		components: {
			color, category, confirmBtn, myIcon
		},
		props: {
			accountBook: {																	// 账本明细（名称，图标，颜色，预算，分类集合，图标所属分类id，图标索引）
				type: Object,
				default: {},
			},																
		},
        data() {
            return {
				accountbookNameLength: 0,													// 账本名字的长度（中文，英文，数字都不一样）
				accountbookbudgetLength: 0,													// 账本名字的长度（中文，英文，数字都不一样）
				iconCategorysList: this.iconCategoryList,									// main.js中声明的图标集合
				accountbook: {
					name: '测试',
					budget: '123',
				},																			// 绑定输入框的属性
				incomeCategoryFlag: true,													// 用于切换支出图标的上下
				payCategoryFlag: true,														// 用于切换收入图标的上下
				selectColorIndex: 0,														// 测试使用，一开始选中的颜色
				selectIconIndex: 0,															// 测试使用，一开始选中的图标
				isShowColor: false,															// 展示颜色选择组件
				isShowIcon: false,															// 展示颜色选择组件
				bgcColor: this.themeYellowColor,
				categoryList: [],															// 测试使用 分类集合（正式来自账本的属性）
            }
        },
		methods: {
			/** 输入框改变事件
			 * @param {Object} name 属性名字
			 */
			change(name) {
				console.log(this.accountbook);
				if (name == "budget") {
					this.accountbookbudgetLength = checkStrType(this.accountbook[name]);
				} else if (name == "name") {
					this.accountbookNameLength = checkStrType(this.accountbook[name]);
				}
				console.log(this.accountbookNameLength);
			},
			/**
			 * 点击图标不展示分类
			 */
			showCategory(name){
				this[name] = !this[name];
			},
			/**
			 * x图标点击事件
			 */
			closeBtn() {
				this.$emit("closeEditDialog");
			},
			/** 点击账本编辑事件
			 * @param {Object} item 账本数据
			 */
			editAccountBook(item) {
				console.log(item);
				this.$emit("editAccountBook", item);
			},
			/**
			 * 点击选择颜色事件
			 */
			openColorDialog() {
				this.openColor();
			},
			/**
			 * 打开颜色选择组件
			 */
			openColor() {
				this.isShowColor = true;
			},
			/**
			 * 关闭颜色选择组件
			 */
			closeColor() {
				this.isShowColor = false;
			},
			/** 选择图标函数
			 * @param {Object} obj( iconCategoryId:分类id , iconIndex: 分类下图标集合的图标索引 )
			 */
			selectIcon(obj) {
				// 
				console.log(obj)
			},
			/**
			 * 打开图标弹框事件
			 */
			openIconDialog() {
				this.openIcon();
			},
			/**
			 * 打开图标选择组件
			 */
			openIcon() {
				this.isShowIcon = true;
			},
			/**
			 * 关闭图标选择组件
			 */
			closeIcon() {
				this.isShowIcon = false;
			},
		},
		mounted() {
			console.log("12321" + this.bgcColor)
			console.log("222   " + this.themeYellowColor)
			this.categoryList = [];
			for (var i = 0; i < 5; i++) {
				this.categoryList.push({
					id: i + 1,
					name: "测试" + i + 1,
					icon: "icon-qianbao",
					bgcColor: this.deepColorArr[i],
					budget: i < 3 ? undefined : '¥ 1000'
				})
			}
			
			// TODO 设置宽度
			var length = checkStrType("测试123");
			console.log(length);
			this.accountbookNameLength = checkStrType(this.accountbook.name);
			this.accountbookbudgetLength = checkStrType(this.accountbook.budget);
			// this.accountbook = {name: '测试', dugdet: '123213'};
		},
    }
</script>

<style lang="scss">
	
	// 覆盖input标签的样式
	::deep .uni-input-input {
		width: 100%;
		height: 100%;
	}
	
	
	// 上面的 x 和 标题 
	.detai-container {
		width: 100%;
		// min-height: 1000rpx;
		height: 100%;
		padding: 20rpx 0rpx;
		box-sizing: border-box;
		// background-color: white;
		
		// 错误图标，编辑标题 盒子
		.up-edit-container {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 20rpx;
			position: relative;
			box-sizing: border-box;
			
			// 错误图标
			.cuowu-icon-container {
				width: 10%;
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 30rpx;
				color: #8b929d;
				position: absolute;
			}
			
			.edit-title-container {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 35rpx;
				font-weight: bold;
			}
		}
		
		// 明细盒子
		.inner-container {
			width: 100%;
			height: 300rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			
			// 里面子项
			.inner-contrainer-container {
				width: 100%;
				height: 25%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				// 左边 
				.name-container-left {
					width: 20%;
					height: 100%;
					font-size: 30rpx;
					font-weight: 100rpx;
					color: $fontColorPurple;
					line-height: 75rpx;
				}
				
				// 右边
				.name-container-right {				
					padding: 0rpx 20rpx;
					height: 65%;
					font-size: 20rpx;
					font-weight: bold;
					background-color: #e6e6e6;
					border-radius: 30rpx;
					font-size: 30rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				// 图标盒子
				.icon-container-right {
					width: 60rpx;
					height: 75%;
					background-color: #e6e6e6;					
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 40rpx;
					color: #989898;
					font-weight: bold;
				}
				
				// 颜色选择盒子
				.color-container-right {
					width: 60rpx;
					height: 75%;
					border-radius: 50%;
				}
			}
			
			// 收入支出盒子
			.category-container {
				width: 100%;
				min-height: 75rpx;
				
				.catetory-title-container {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.right-catetory-icon {
						width: 50rpx;
						height: 50rpx;
						background-color: $themeLightPurpleColor;
						color: $themePurpleColor;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
			
			// 添加分类盒子
			.add-category-container {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				
				// 左边图标
				.add-category-left-icon {
					font-size: 60rpx;
					margin-right: 20rpx;
				}
			} 
		}
	}
	
	// 向下箭头的判断样式
	.rotate {
		transition: all .5s;
	}
	
	.no-rotate {
		transform:rotate(-180deg);
		transition: all .5s;
	}
</style>
